<template>
  <div>
    <div class="book-container" v-if="!this.searching">
      <div class="header">
        <div class="box" @click="onSearching">
          <span class="iconfont">&#xe65c;</span>
          <span>&nbsp;搜索图书名称</span>
        </div>
      </div>
      <div class="sub-container">
        <img src="../../assets/images/quality.png" class="head-img">
        <div class="books-container">
          <div v-for="item in this.books" :key="item.id">
            <book-item class="items" :books="item"/>
          </div>
        </div>
      </div>
    </div>
    <book-search v-else @cancel="onCancel"/>
  </div>
</template>

<script>
import {BookModel} from '../../models/book'
import BookItem from 'components/bookItem/BookItem'
import BookSearch from 'components/bookSearch/BookSearch'
const bookModel = new BookModel()
export default {
  name: 'Book',
  components: {
    BookItem,
    BookSearch
  },
  data () {
    return {
      books: [],
      searching: false
    }
  },
  methods: {
    $_getHotInfo () {
      bookModel.getHotList()
        .then(res => {
          this.books = res
        })
    },
    onSearching () {
      this.searching = true
    },
    onCancel () {
      this.searching = false
    }
  },
  mounted () {
    this.$_getHotInfo()
  }
}
</script>

<style lang="stylus" scoped>
  .book-container
    display: flex
    flex-direction: column
    align-items: center
    width: 100%
    margin-top: 1.16rem
    .header
      position: fixed
      height: 1rem
      width: 100%
      display: flex
      flex-direction: row
      align-items: center
      justify-content: center
      background-color: #fff
      box-shadow: 0 0 1px 0 #e3e3e3
      z-index: 99
      .box
        display: flex
        flex-direction: row
        justify-content: center
        align-items: center
        border-radius: .5rem
        background-color: #F7F7F7
        height: .68rem
        width: 7rem
        color: #999999
        .iconfont
          font-size: .28rem
    .sub-container
      display: flex
      flex-direction: column
      align-items: center
      background-color: #F9F9F9
      margin-top: 1rem
      .head-img
        width: 1.06rem
        height: .34rem
        margin-top: .4rem
      .books-container
        margin-top: .1rem
        display: flex
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-between
        padding: 0 .9rem
        margin-bottom: .88rem
        .items
          margin-bottom: .1rem
</style>
